<!-- eslint-disable vue/html-indent -->
<template>
  <view class="installTimeLine-wrap">
    <tm-sheet
      _class="flex-col"
      :margin="[0]"
      :padding="[0, 10]"
      v-if="!loading && recordDatas.length > 0"
    >
      <view>
        <tm-timeline>
          <tm-timeline-item
            v-for="(record, i) in recordDatas"
            :key="i"
            :icon="loadWorkStatus(record.status).img"
            :size="42"
            type="outlined"
            :color="loadWorkStatus(record.status).borderColor"
            :border="0"
            :style="{ position: 'relative' }"
            :describe="record.approveType"
            :info="record.destName"
          >
            <view
              class="timeline"
              :style="{
                backgroundColor: loadWorkStatus(record.status)?.borderColor
              }"
            ></view>
            <tm-sheet :round="3" :margin="[0, 10]" :padding="[0]" :width="600">
              <view class="info">
                <acatar class="acatar" v-if="record?.createUser" :size="100" :img="record.avatar"
                ></acatar>
                <view
                  v-if="record"
                  class="bgwhite"
                  :style="{
                    backgroundColor: loadWorkStatus(record.status)
                      ?.backgroundColor
                  }"
                >
                  <view style="margin-bottom: 6rpx">
                    <view class="mg5">
                      <view class="nameClass" :style="{ marginRight: '12rpx' }">
                        {{ loading ? '加载中...' : record?.createUserName }}
                      </view>
                      <view
                        :style="{
                          marginRight: '12rpx',
                          display: 'flex',
                          alignItems: 'center'
                        }"
                        :class="loadWorkStatus(record.status).statusClassName"
                      >
                        <tm-icon
                          :color="loadWorkStatus(record.status).borderColor"
                          :font-size="24"
                          :name="loadWorkStatus(record.status).img"
                          :style="{ marginRight: '6rpx' }"
                        ></tm-icon>
                        {{ loadWorkStatus(record.status).text }}
                      </view>
                    </view>
                    <view class="mg5">
                      联系人: {{ loading ? '加载中...' :(record.code?record.code:'暂无') }}
                    </view>
                    <view class="mg5 timeColor">
                      {{
                          DayJs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')
                      }}
                    </view>
                    <view class="mg5">
                      审核意见: {{ loading ? '加载中...' : record.comment }}
                    </view>
                  </view>
                </view>
              </view>
            </tm-sheet>
          </tm-timeline-item>
        </tm-timeline>
      </view>
    </tm-sheet>
    <tm-sheet v-if="!loading && recordDatas.length === 0" :margin="[0]">
      <tm-result
        :showBtn="false"
        subTitle="暂无数据"
        title="暂无历史痕迹"
      ></tm-result>
    </tm-sheet>
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import WorkCtrl from '../../common'
import * as dayjs from '../../../../tmui/tool/dayjs/esm/index'
import { TaskStatus } from '@/ts/core/public/enums'
import { model } from '@/ts/base'
import { WorkTask } from '@/ts/core/work/task'
import acatar from '@/components/header/acatar.vue'
const DayJs = dayjs.default

type Props = {
  instanceInfo: any
  workTask: WorkTask
  allTasks: model.AllTask[]
}

const props = defineProps<Props>()
const loading = ref<boolean>(true)
const recordDatas = ref<model.WorkRecordView[]>([])

/** 加载数据 */
const loadData = async () => {
  const records = props.workTask.getSortedRecords(props.allTasks)
  uni.showLoading({
    title: '流程加载中...'
  })
  if (records.length > 0) {
    for (const record of records) {
      if (record.createUser) {
        const user = await WorkCtrl.findWorkEntityAsync(record.createUser)
        record.createUserName = (user)?.name
        if (user?.icon) {
          record.avatar = user.icon
        }
        if (user?.code) {
          record.code = user.code
        }
      }
    }
    recordDatas.value = records
    loading.value = false
    uni.hideLoading()
  } else {
    uni.hideLoading()
    loading.value = false
  }
}

/** 办事状态 */
const loadWorkStatus = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.ApplyStart:
      return {
        img: 'tmicon-check',
        text: '已发起',
        borderColor: '#32bd41',
        statusClassName: 'statusSuccess',
        backgroundColor: ''
      }
    case TaskStatus.ApprovalStart:
      return {
        img: 'tmicon-check',
        text: '已通过',
        borderColor: '#32bd41',
        statusClassName: 'statusSuccess',
        backgroundColor: ''
      }
    case TaskStatus.RefuseStart:
      return {
        img: 'tmicon-times',
        text: '已拒绝',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.BackStartStatus:
      return {
        img: 'tmicon-times',
        text: '已驳回',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.CancelStartStatus:
      return {
        img: 'tmicon-times',
        text: '被取消',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.ResetStartStatus:
      return {
        img: 'tmicon-times',
        text: '被重置',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.NodeMissStatus:
      return {
        img: 'tmicon-times',
        text: '节点丢失',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.DefineMissStatus:
      return {
        img: 'tmicon-times',
        text: '定义丢失',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    case TaskStatus.InstanceMissStatus:
      return {
        img: 'tmicon-times',
        text: '实例丢失',
        borderColor: '#e37318',
        statusClassName: 'statusRefuse',
        backgroundColor: ''
      }
    default:
      return {
        img: 'tmicon-clock',
        text: '审核中',
        borderColor: '#0052d9',
        statusClassName: 'statusReview',
        backgroundColor: '#d9e1ff'
      }
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.installTimeLine-wrap {
  height: calc(100vh - 134px);
  background-color: #fff;
}
.mg5 {
  margin: 5px;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.timeColor {
  color: #21232866;
}
.timelineRefuse {
  color: #e37318;
  margin: 5px;
}

.timelineReview {
  color: #0052d9;
  margin: 5px;
}
.bgwhite {
  padding: 10px 0;
  flex: 6;
}
.acatar{
  flex: 1;
}
.statusReview {
  color: #0052d9;
  background-color: #d9e1ff;
}
.statusSuccess {
  color: #32bd41;
  background-color: rgba(46, 202, 181, 0.1);
}
.statusRefuse {
  color: #e37318;
  background-color: #fff1e9;
}

.timeline {
  width: 1px;
  position: absolute;
  left: 0px;
  min-height: 107px;
  height: 80%;
  margin-top: 8px;
}
.nameClass{
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  display: inline-block; 
  max-width: 350rpx;
}
.info{
  display: flex;
  align-items: center;
}
</style>
